<template>
  <li class="content">
    <!-- 顶部背景 -->

    <div class="top">
      <img src="../../assets/image/hellowword/TextOne.png" alt="" />
    </div>
    <!-- 地图 -->
    <div style="" ref="map" v-if="isShow" class="maps"></div>
    <!-- <div id="maps" v-show="!isShow"></div> -->
    <Children v-else :datas="datas" :name="name" />
  </li>
</template>

<script>
import axios from "axios";
import Children from "./children.vue";
export default {
  components: { Children },
  data() {
    return {
      // echarts实例
      myChart: null,
      //   全部数据
      allData: {},

      //   自适应宽度
      adaptionWidth: 60,
      isShow: true,
      datas: [],
      name: "",
    };
  },
  mounted() {
    //   初始化echarts
    this.initChart();
    // 初始化数据
    this.initData();
    // 注册自适应
    this.adaption();
    // 调用配置echarts自适应选项方法
    this.adaptionOption();
  },
  methods: {
    //   初始化echarts实例
    async initChart() {
      this.myChart = this.$echarts.init(this.$refs.map, "chalk");

      let { data } = await axios.get("map/china.json");
      //   注册地图数据
      this.$echarts.registerMap("china", data);
      this.myChart.setOption({
        //   配置地图数据
        geo: {
          // 指定注册地图名称
          map: "china",
          itemStyle: {
            areaColor: "#369",
            borderColor: "#333",
          },
          top: "5%",
          bottom: "5%",
        },
      });
      this.adaptionWidth = (this.myChart._dom.offsetWidth / 100) * 4;
      this.myChart.on("click", (r) => {
        // 经纬度
        this.datas = this.myChart.convertFromPixel("geo", [
          r.event.offsetX,
          r.event.offsetY,
        ]);
        // console.log(this.datas);
        this.isShow = false;
        this.name = r.name;
      });
    },

    // 初始化数据
    async initData() {
      // let { data } = await axios.get("http://119.45.221.185:5000/api/map");
      // this.allData = data;
      this.setOption();
    },
    // 配置选项
    setOption() {
      // 图例数据
      // let lengenData = this.allData.map((r) => {
      //   return r.name;
      // });

      // 组织系列数据
      // let seriesData = this.allData.map((r, i) => {
      //   return {
      //     name: r.name,
      //     //   使用地图坐标系
      //     coordinateSystem: "geo",
      //     //   涟漪动画特效散点图
      //     type: "effectScatter",

      //     data: r.children,
      //     //   配置涟漪动画
      //     rippleEffect: {
      //       scale: 5,
      //       brushType: "stroke",
      //     },
      //   };
      // });
      this.myChart.setOption({
        // title: {
        //   text: "商家分布",

        //   left: "3%",
        //   top: "3%",
        // },
        grid: {
          left: "3%",
          bottom: "1%",
          top: "30%",
          right: "3%",
          containLabel: true,
        },
        tooltip: {
          triggerOn: "mousemove",
          trigger: "axis",
        },
        legend: {
          // data: lengenData,
          icon: "circle",
          left: "5%",
          bottom: "5%",
          orient: "vertical",
        },

        // series: seriesData,
      });
    },
    // 配置echarts自适应
    adaptionOption() {
      // echrts自适应调整
      this.myChart.resize();
      //  重新计算自适应宽度
      this.adaptionWidth = (this.myChart._dom.offsetWidth / 100) * 4;
      this.myChart.setOption({
        title: {
          textStyle: {
            fontSize: this.adaptionWidth,
          },
        },
        legend: {
          itemWidth: this.adaptionWidth / 2,
          itemHeight: this.adaptionWidth / 2,
          textStyle: {
            fontSize: this.adaptionWidth * 0.5,
            padding: [0, 0, 0, this.adaptionWidth * 0.2],
          },
          //   间隔
          itemGap: this.adaptionWidth * 0.3,
        },
      });
    },
    // 自适应
    adaption() {
      window.onresize = () => {
        //  调用自适应选项方法
        this.adaptionOption();
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 2004px;
  position: absolute;
  left: 1703.99px;
  // border: 1px solid red;
  display: flex;
  flex-direction: column;
  height: 1080px;
  margin-top: -25px;

  .top {
    width: 2351.02px;
    height: 171px;
    background: url("../../assets/image/hellowword/MarshallingSix.png")
      no-repeat;
    background-size: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 759px;
      height: 55px;
    }
  }
  #maps,
  .maps {
    margin-left: 178px;
    // border: 1px solid red;
    height: 883px;
    width: 2001px;
  }
}
</style>
